---
import BaseLayout from "@layouts/BaseLayout.astro";
import {
  SEARCH_PAGE_TITLE,
  SEARCH_PAGE_DESCRIPTION,
  SITE_TITLE,
} from "@consts";
import Pagefind from "astro-pagefind/components/Search";
---

<BaseLayout title={SEARCH_PAGE_TITLE} description={SEARCH_PAGE_DESCRIPTION}>
  <main>
    <section class="mx-auto w-full max-w-screen-2xl px-4 pb-32 md:px-6">
      <!-- 增加了底部的填充，防止内容覆盖 footer -->
      <div
        class="mt-32 flex min-h-[500px] flex-col items-center justify-start pt-6"
      >
        <a href="/" class="mb-4 flex-none text-xl font-semibold">{SITE_TITLE}</a
        >
        <div
          class="h-auto max-h-[500px] w-full max-w-[500px] overflow-y-auto md:w-[400px] lg:w-[500px]"
        >
          <Pagefind
            id="search"
            className="pagefind-ui h-full w-full"
            uiOptions={{ showImages: false }}
          />
        </div>
      </div>
    </section>
  </main>
</BaseLayout>
